<template>
  <div class="map-wrapper">
    <div id="container" :style="{ height: `${mapHeight}px` }"></div>
  </div>
</template>
<script lang="ts" setup>
import _ from 'lodash'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'

import AMapLoader from '@amap/amap-jsapi-loader'
import { useUserStore } from '@/store/modules/user-store'

import location_fullfilled from '@/assets/images/logo/location_fullfilled.png'
import location_pending from '@/assets/images/logo/location_pending.png'
import location_active from '@/assets/images/logo/location_active.png'

const route = useRoute()
const router = useRouter()
let map: any = null
let AMap: any = null
let mouseTool: any = null
const icons = {
  location_pending,
  location_active,
  location_fullfilled
}
const userStore = useUserStore()
const routeLng = route.query.lon
const routeLat = route.query.lat
// 地图高度
const mapHeight = ref(0)
// 获取路由传进来的经纬度，设置中心点并且搭一个标注点

// 初始化地图
function initMap() {
  window._AMapSecurityConfig = {
    securityJsCode: '98ed597fdab99b3580ded9e3d1f19d4e'
  }
  const loadMapConfig = {
    key: 'e3ad28f39ebf5c7d5fb1d7153fb2f3b4', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.LabelsLayer', 'AMap.MouseTool'] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  }
  const centerPoint = routeLng && routeLat ? [Number(routeLng), Number(routeLat)] : userStore.getCenterLocal.map(Number)
  const mapConfig: any = {
    zoom: 14,
    zooms: [5, 20],
    // center: [routeLng, routeLat],
    center: centerPoint,
    resizeEnable: true
  }

  AMapLoader.load(loadMapConfig).then(async (res) => {
    AMap = res
    mapHeight.value = document.querySelector('.map-wrapper')?.clientHeight || 0
    map = new AMap.Map('container', mapConfig)

    // 如果有路由传来的经纬度，添加标注点
    if (routeLng && routeLat) {
      const marker = new AMap.Marker({
        position: new AMap.LngLat(Number(routeLng), Number(routeLat)),
        title: '当前位置',
        icon: new AMap.Icon({
          size: new AMap.Size(25, 34),
          imageSize: new AMap.Size(25, 34),
          image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
        })
      })
      map.add(marker)
    }
  })
}

// 添加网点坐标
const storesMarkers = ref([])
function addMarker() {
  // 创建LabelsLayer图层
  const labelsLayer = new AMap.LabelsLayer({
    zooms: [2, 20], // 设置可见级别范围
    zIndex: 1000, // 设置zIndex
    collision: false // 设置标签是否允许碰撞
  })

  labelsLayer.add(storesMarkers.value)
  map.add(labelsLayer)
}

onActivated(initMap)
onUnmounted(() => {
  map.value?.destroy()
})
</script>
<style lang="less" scoped>
.map-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  .mouse-tool-box {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    .mouse-tool-btn {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }
  #container {
    width: 100%;
    height: auto;
  }
  .order-box {
    position: absolute;
    right: 0;
    top: 0;
    width: 450px;
    .store-order-item {
      position: relative;
      width: 98%;
      font-size: 12px;
      padding: 10px;
      margin-bottom: 5px;
      border-radius: 5px;
      background-color: #f8f9ff;
      cursor: pointer;
      border: 1px solid transparent;
      .wait-time :deep(.ant-tag > .anticon + span) {
        margin-inline-start: unset;
      }
      .no {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
      }
      .content {
        display: flex;
        flex-direction: column;
        padding-left: 30px;
        width: 100%;
        p {
          width: 100%;
          margin: 0;
          // white-space: nowrap;
          // overflow: hidden;
          // text-overflow: ellipsis;
        }
        .line {
          color: #8085a2;
        }
        .line span {
          color: #000;
        }
      }
      .order-info-line {
        display: flex;
        gap: 5px;
        align-items: center;
      }
    }
    .store-order-item.active,
    .store-order-item:hover {
      background-color: #eaf4f0;
      border: 1px solid @primary-color;
    }
  }
  .order-box-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
  }
  .total-box {
    position: absolute;
    left: -265px;
    bottom: 0px;
    width: 260px;
    font-size: 12px;
    .total-box-line {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0;
      strong {
        font-size: 14px;
      }
      span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
